<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OKX 数据展示</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <style>
        body {
            background-color: #f4f7fa;
            font-family: Arial, sans-serif;
        }
        .navbar {
            background-color: #0c2461;
        }
        .card {
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            transition: transform 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
        }
        .card-header {
            background-color: #0c2461;
            color: white;
            border-radius: 10px 10px 0 0;
            padding: 15px;
            font-weight: bold;
        }
        .btn-primary {
            background-color: #0c2461;
            border-color: #0c2461;
        }
        .btn-primary:hover {
            background-color: #1e3799;
            border-color: #1e3799;
        }
        .jumbotron {
            background-color: #fff;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <!-- 引入导航栏片段 -->
    <div th:replace="fragments/navbar :: navbar"></div>

    <div class="container">
        <div class="jumbotron my-4">
            <h1 class="display-4">欢迎使用 OKX 数据展示系统</h1>
            <p class="lead">此系统使用 OKX API V5 实现实时数据展示，包括持仓信息和产品行情。</p>
            <hr class="my-4">
            <p>当前默认展示产品: <span th:text="${defaultInstId}">BTC-USDT</span></p>
            <p>活跃产品数量: <span th:text="${accounts.size()}">0</span></p>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">持仓信息</div>
                    <div class="card-body">
                        <p>查看当前账户的持仓信息，包括持仓方向、数量、均价等详细数据。</p>
                        <a href="/positions" class="btn btn-primary">查看持仓信息</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">行情信息</div>
                    <div class="card-body">
                        <p>查看<strong>已配置产品</strong>的详细行情信息，包括最新价格、买一卖一价、24小时变化等数据，支持下单交易。</p>
                        <a th:href="@{/ticker(instId=${defaultInstId})}" class="btn btn-primary">查看行情信息</a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">所有行情</div>
                    <div class="card-body">
                        <p>查看<strong>OKX交易所所有产品</strong>的实时行情信息，不限于已配置产品，支持按产品类型筛选。</p>
                        <a href="/all-markets" class="btn btn-primary">查看所有行情</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">产品管理</div>
                    <div class="card-body">
                        <p>管理系统中的产品信息，包括添加、编辑和删除产品，设置产品关联等。</p>
                        <a href="/accounts" class="btn btn-primary">管理产品</a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4" th:if="${!accounts.isEmpty()}">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">我的产品</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-3" th:each="account : ${accounts}">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <h5 class="card-title" th:text="${account.accountName}">账户名称</h5>
                                        <h6 class="card-subtitle mb-2 text-muted" th:text="${account.instId}">产品ID</h6>
                                        <p class="card-text">
                                            杠杆: <span th:text="${account.leverage}">0</span><br>
                                            保证金: <span th:text="${account.crossMargin}">0</span>
                                        </p>
                                        <div class="d-flex justify-content-between">
                                            <a th:href="@{/accounts/{id}(id=${account.id})}" class="btn btn-sm btn-outline-primary">详情</a>
                                            <a th:href="@{/ticker(instId=${account.instId})}" class="btn btn-sm btn-outline-success">查看行情</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="container mt-5">
        <hr>
        <p class="text-center text-muted">&copy; 2023 OKX 数据展示系统</p>
    </footer>

    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
</body>
</html> 